const path = require('path');
// 引入html打包插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入提取css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//引入 优先css的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 1. 使用node内置模块glob自动匹配入口的js文件
// 在node环境下，本身拥有glob插件对象
// 引入glob插件
const glob= require("glob")
// 书写代码完成，完成webpack入口的js文件的自动扫描功能
let entryobj = {}
// 书写扫描的规则
let data= glob.sync("./src/pages/**/*.js")
// 遍历数组
data.forEach(function (v) {
    let fileNameArr = v.match(/\/(\w+).js/i)
    entryobj[fileNameArr[1]] = v
   
})


//需要扫描所有的htm1文件
// let htmlFiles = glob.sync("./src/pages/**/*.html")
// // 使用map遍历数组，处理数据
// let htmlArr = htmlFiles.map(function (v) {
//     let fileArr = v.match(/\/(\w+).html/i)
//     return new Htmlwebpackplugin({
//         ftemplate: v,
//         filename: fileArr[e].slice(1),
//         chunks: [fileArr[1]]
//     })
// })
// / 2. 自动匹配打包html的文件
let htmls = glob.sync("./src/pages/**/*.html")
let htmlArr = htmls.map(v => {
    let fn = v.match(/\/(\w+).html/i)
    return new HtmlWebpackPlugin({
        template: v,
        filename: fn[0].slice(1),
        chunks: [fn[1]]
    })
})
module.exports = {

    // 入口
     entry:entryobj,
    //   {
    //     login: "./src/pages/login/login.js",
    //     register: "./src/pages/register/register.js",
    //     list: "./src/pages/list/list.js",
    //     add: "./src/pages/add/add.js",
    //     details: "./src/pages/details/details.js",
    // },
    // 出口
    output: {
        // 公共的文件输出路径
        publicPath: "./",
        filename: "js/[name].js",
    },
    // 加载器
    module: {
        // 加载器的规则
        rules: [
            // css加载器
            {
                test: /\.css$/, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../"
                    }
                }, "css-loader"]
            },
            // less加载器
            {
                test: /\.less$/, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../"
                    }
                }, "css-loader", "less-loader"]
            },
            // css中引用图片的加载器
            {
                test: /\.(jpg|jpeg|webp|gif|svg|png|mp4)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10 * 1024,
                        name: "[hash:16].[ext]",
                        outputPath: "imgs",
                        esModule: false, //禁用es6的模块化
                    }
                }]
            },
            // html页面中的图片加载器
            { test: /\.html$/, use: ["html-loader"] },
            // 加载iconfont字体图标
            {
                test: /\.(ttf|woff|woff2|eot|svg)$/i, use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[hash:16].[ext]', //设置字体图标文件的文件名
                        outputPath: 'fonts', //设置字体图标文件的打包文件夹
                    }
                }]
            }

        ]
    },

    // 插件
    plugins: [
    
        // // html打包插件
        // new HtmlWebpackPlugin({
        //     template: './src/pages/login/login.html',
        //     filename: "login.html",
        //     chunks: ["login"]
        // }),
        // // html打包插件
        // new HtmlWebpackPlugin({
        //     template: './src/pages/register/register.html',
        //     filename: "register.html",
        //     chunks: ["register"]
        // }),
        // // html打包插件
        // new HtmlWebpackPlugin({
        //     template: './src/pages/list/list.html',
        //     filename: "list.html",
        //     chunks: ["list"]
        // }),
        // // html打包插件
        // new HtmlWebpackPlugin({
        //     template: './src/pages/add/add.html',
        //     filename: "add.html",
        //     chunks: ["add"]
        // }),
        // // html打包插件
        // new HtmlWebpackPlugin({
        //     template: './src/pages/details/details.html',
        //     filename: "details.html",
        //     chunks: ["details"]
        // }),

        //提取css文件的插件
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
        // 优化css的插件
        new OptimizeCssAssetsWebpackPlugin(),
    ].concat(htmlArr),
    // 模式
    mode: process.env.NODE_ENV,

    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 8080,
        open: true,
        publicPath: '/',
        openPage: 'index.html',
    },
    target: 'web',
}